<include file="Index/_meta" />
<body>
<div class="right">
    <div class="mg40">
        <div class="cheliangtop">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="cheliangwy">
                        <div id="hxqt" class="cavascenter"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="chelianghd">
                        <div id="qu_jyfzzz" class="cavascenter"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
            </div>
        </div> 
        <div class="rkzhubiao">
            <div class="layui-row">
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
                <div class="layui-col-md5">
                    <div class="chelianghd">
                        <div id="qu_spfzzz" class="cavascenter"></div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="chelianghd">
                        <div id="qu_lvhua" class="cavascenter"></div>
                    </div>
                </div>
                <div class="layui-col-md1">
                    <div>&nbsp;</div>
                </div>
            </div>
        </div>  
    </div> 
</div>
<!-- 房屋用途种类图 -->
<script type="text/javascript">
    var dom = document.getElementById("hxqt");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
                text: '房屋使用情况',
                subtext: '',
                x:'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            x: 'left',
            data:['已出租未使用','已出租正在使用','未出租','本地自住','本地待出租','闲置']
        },
        series: [
            {
                name:'房屋使用情况',
                type:'pie',
                selectedMode: 'single',
                radius: [0, '30%'],

                label: {
                    normal: {
                        position: 'inner'
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:92900, name:'商用'},
                    {value:204800, name:'居住'}
                ]
            },
            {
                name:'房屋使用情况',
                type:'pie',
                radius: ['40%', '55%'],
                data:[
                    {value:335, name:'已出租未使用'},
                    {value:3100, name:'未出租'},
                    {value:251, name:'闲置'},
                    {value:89214, name:'已出租正在使用'},
                    {value:12306, name:'本地自住'},
                    {value:192243, name:'本地待出租'},
                    {value:251, name:'闲置'}

                ]
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 家用房租增长图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_jyfzzz");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '居用房租变化',
            subtext: '',
            x:'left'
        },
        tooltip: {
            trigger: 'none',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
            },
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data:['低档', '中档','高档']
        },
        xAxis: {
            type: 'category',
            data: ['2016.9', '2016.12', '2017.3', '2017.6', '2017.9', '2018.12', '2018.3', '2018.6', '2018.9']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'低档',
            data: [820, 930, 900, 934, 950, 1000, 1100,1430, 1500],
            type: 'line',
            smooth: true
        },{
            name:'中档',
            data: [2790, 3000, 3200, 3400, 3600, 3800, 4200, 4600, 5000],
            type: 'line',
            smooth: true
        },{
            name:'高档',
            data: [5000, 5200, 5400, 5500, 6500, 7800, 8300, 9000, 10000],
            type: 'line',
            smooth: true
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 商铺房租增长图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_spfzzz");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '商铺房租变化',
            subtext: '',
            x:'left'
        },
        tooltip: {
            trigger: 'none',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
            },
            axisPointer: {
                type: 'cross'
            }
        },
        legend: {
            data:['普通街道', '商业街','CBD']
        },
        xAxis: {
            type: 'category',
            data: ['2016.9', '2016.12', '2017.3', '2017.6', '2017.9', '2018.12', '2018.3', '2018.6', '2018.9']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            name:'普通街道',
            data: [820, 930, 900, 934, 950, 1000, 1100,1430, 1500],
            type: 'line',
            smooth: true
        },{
            name:'商业街',
            data: [2790, 3000, 3200, 3400, 3600, 3800, 4200, 4600, 5000],
            type: 'line',
            smooth: true
        },{
            name:'CBD',
            data: [5000, 5200, 5400, 5500, 6500, 7800, 8300, 9000, 10000],
            type: 'line',
            smooth: true
        }]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
<!-- 绿化面积图 -->
<script type="text/javascript">
    var dom = document.getElementById("qu_lvhua");
    var myChart = echarts.init(dom);
    var app = {};
    var option = null;
    option = {
        title : {
            text: '绿化面积图',
            subtext: '',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['未绿化面积','绿化面积']
        },
        series : [
            {
                name: '绿化量(公顷)',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:56215, name:'未绿化面积'},
                    {value:30873, name:'绿化面积'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>